<template>
  <!--  gutter: 栅格间隔-->
  <el-row class="home" :gutter="20">
    <!--   span:	栅格占据的列数 -->
    <el-col :span="8" style="margin-top: 20px;">
      <el-card shadow="hover">
        <div class="user">
          <img :src="userImg" alt="">
          <div class="userInfo">
            <p class="name">{{ user }}</p>
            <p class="access">超级管理员</p>
          </div>
        </div>
        <div class="login-info">
          <p>上次登陆时间：<span>2021-7-13</span></p>
          <p>上次登录地点：<span>武汉</span></p>
        </div>
      </el-card>
      <el-card style="margin-top: 20px; height: 460px;">
        <el-table :data="tableData" stripe style="width: 100%">
          <el-table-column v-for="(val, key) in tableLabel"
              :key="key"
              :prop="key"
              :label="val"
              >
          </el-table-column>
        </el-table>
      </el-card>
    </el-col>

    <el-col :span="16" style="margin-top: 20px">
      <el-row :gutter="20" style="margin-bottom: 10px;">
        <el-col :span="8" v-for="item in countData" :key="item.name" style="margin-bottom: 10px; ">
          <el-card style="height: 80px" :body-style="{display: 'flex', padding: 0, borderRadius: 12}">
            <i class="icon" :class="item.icon" :style="{background: item.color}"></i>
            <div class="detail">
              <p class="num">￥{{item.value}}</p>
              <p class="txt">{{item.name}}</p>
            </div>
          </el-card>
        </el-col>
      </el-row>

      <el-card style="height: 280px"></el-card>
      <div class="graph" style="margin-top: 10px">
        <el-col :span="12" style="padding: 10px 10px 10px 0">
          <el-card style="height: 260px"></el-card>
        </el-col>
        <el-col :span="12" style="padding: 10px 0 10px 10px">
          <el-card style="height: 260px"></el-card>
        </el-col>
      </div>

    </el-col>
  </el-row>
</template>

<script>
import {getData} from '../../api/data.js'
import {mapState} from "_vuex@3.6.2@vuex";
export default {
  data() {
    return {
      userImg: require('../../src/assets/image/chicken.jpeg'),
      tableLabel: {},
      tableData: [],
      countData: []
    }
  },
  computed: {
    ...mapState({
      user: state => state.user.user
    }),
  },
  mounted() {
    getData().then(res => {
      const { code, data } = res.data
      if (code == 200) {
        this.tableLabel = data.tableLabel
        this.tableData = data.tableData
        this.countData = data.countData
      }
    })
  }
}
</script>

<style lang="less" scoped>
  .user {
    display: flex;
    img {
      width: 100px;
      height: 100px;
    }
  }
  .icon {
    display: flex;
    width: 80px;
    height: 80px;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    color: #fff;
  }
  .detail {
    width: 200px;
    .num {
      font-size: 30px;
    }
    .txt {
      font-size: 16px;
    }
    p {
      margin: 6px;
    }
  }
</style>